<template>
	<view>
		<view class="fixed">
			<cu-custom bgColor="bg-shadeTop text-white">
				<block slot="content">
					<p style="font-weight: 600;">做菜有谱</p>
				</block>
			</cu-custom>
			<movable-area class="movable-area1">
				<movable-view class="movable-view" :x="bugerx" :y="bugery" direction="all" damping=100>
					<xm-cezier-cart ref="mySon" direction="bottom" backgroundColor="#fbbd08" showMs="img" width="37px"
						height="30px" :position="{ left: 120, bottom: 120 }"></xm-cezier-cart>
				</movable-view>
			</movable-area>
		</view>
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500">
			<swiper-item v-for="(item,index) in 3" :key="index">
				<image :src="'../../static/food-'+index+ '.jpg'" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
				style="height:calc(100vh - 375upx)">
				<view class="cu-item" :class="index==tabCur?'text-yellow cur':''" v-for="(item,index) in list"
					:key="index" @tap="TabSelect" :data-id="index">
					{{item.names}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
				:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view v-for="(item,index) in list" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-yellow"></text> {{item.names}}
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item cur" v-for="(xi,index) in item.foods" :key="xi.id">
							<view @tap="showModal" data-target="DialogModal1" class="cu-avatar radius lg"
								style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
								<view v-show="xi.typeTag!=null" class="cu-tag badge" :class="xi.typeTag.color">
									{{xi.typeTag.label}}
								</view>
							</view>
							<view class="content" @tap="showModal" data-target="DialogModal1">
								<view>
									<text class="text-cut">{{xi.names}}</text>
									<view class="cu-tag round sm" :class="xi.tag[0].color">{{xi.tag[0].label}}</view>
								</view>
								<view class="text-gray text-sm flex">
									<text class="text-cut">{{xi.describe}}</text>
								</view>
							</view>
							<view class="action" @click="Ordering($event,xi.id)">
								<view class="cuIcon-roundaddfill text-yellow"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop style="background-color:white;border-radius:20px;width: 360px;">
				<view class="cu-bar bg-white justify-end" style="min-height:70px;">
					<view class="content">{{nowFood.names}}</view>
					<!-- <view class="action">
						<text class="text-yellow" :class="nowFood.isLove?'cuIcon-likefill':'cuIcon-like'" style="font-size: 30px;"></text>
					</view> -->
				</view>
				<view class="padding-bottom-sm">
					<image style="height: 200px;width: 300px;" mode="aspectFit" src='../../static/food-1.jpg'></image>
				</view>
				<view style="text-align: left;" class="padding-left-xl padding-right-xl padding-bottom-sm">
					<view class='cu-tag radius'>微辣</view>
					<view class='cu-tag radius'>推荐尝试</view>
					<view class='cu-tag radius'>拿手好菜</view>
				</view>
				<view style="text-align: left;" class="padding-left-xl padding-right-xl padding-bottom-sm">
					<text class="food-info">
						·新鲜的蟹肉\n·特制汉堡面包\n·新鲜蔬菜\n·奶酪\n这道菜就不摆了，正宗比奇堡风味汉堡。当年蟹老板进贡给老佛爷的御用菜你就想想能有多离谱！
					</text>
				</view>
				<view style="text-align: left;" class="padding-left-xl padding-right-xl padding-bottom-sm">
					推荐程度：<text class="cuIcon-favorfill text-yellow"></text>
					<text class="cuIcon-favorfill text-yellow"></text>
					<text class="cuIcon-favorfill text-yellow"></text>
					<text class="cuIcon-favor text-yellow"></text>
					<text class="cuIcon-favor text-grey"></text>
				</view>
				<view class="cu-bar bg-white justify-center">
					<view class="action" style="width: 100%;">
						<button class="cu-btn round line-yellow text-yellow margin-right-xl"
							@tap="hideModal">加入菜单</button>
						<button v-show="!nowFood.isLove" class="cu-btn round line-yellow margin-left-xl"
							@tap="hideModal">加入收藏</button>
						<button v-show="nowFood.isLove" class="cu-btn round bg-yellow text-white margin-left-xl"
							@tap="hideModal">取消收藏</button>
					</view>
				</view>
			</view>
		</view>
		<flotage :pdNumber="pdNumber" @fatherMethod="showModal1"></flotage>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-bar bg-white">
					<view class="text-yellow"><text style="padding-left: 20px;" class="cuIcon-moneybag"
							@click="Settle">结算</text></view>
					<view class="text-grey" @click="ClearCart"><text style="padding-right: 20px;"
							class="cuIcon-delete text-df">清空</text></view>
				</view>
				<view v-show="shopCart.length>0">
					<scroll-view scroll-y scroll-with-animation style="height: 500px;background-color: white;">
						<view style="margin-top: 0px;" class="cu-list menu-avatar"
							v-for="(item,index) in shopCart" :key="item.id">
							<view class="cu-item">
								<view class="cu-avatar lg"
									style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
								</view>
								<view class="content">
									<view class="text-grey">{{item.names}}</view>
									<view class="text-gray text-sm flex">
										<view class="text-cut" v-for="(x,index) in item.tag" :key="index">
											<view class="cu-tag round sm" :class="x.color">{{x.label}}</view>
										</view>
									</view>
								</view>
								<view class="action" style="width: 80px;">
									<text class='cuIcon-roundclosefill text-yellow'
										@click="CartOperation(false,item.id)"></text>
									<text class="text-grey padding-left-sm padding-right-sm">{{item.num}}</text>
									<text class='cuIcon-roundaddfill text-yellow '
										@click="CartOperation(true,item.id)"></text>
								</view>
							</view>
						</view>
						<view style="margin-top: 5px;padding-bottom: 10px;">
							<view class="cu-form-group align-start">
								<view class="title">备注：</view>
								<textarea style="text-align: left;" maxlength="500"></textarea>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-show="shopCart.length==0" class="padding-xl text-yellow">
					吃饭不积极，思想有问题！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: '1',
					names: '西式美食',
					foods: [{
						id: '1-1',
						names: '美味蟹黄堡',
						describe: '比奇堡x蟹堡王联名款！~',
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg',
						typeTag: {
							label: '新',
							color: 'bg-red'
						},
						tag: [{
								label: '爆辣',
								color: 'bg-red'
							},
							{
								label: '限定',
								color: 'bg-pink'
							}
						],
					}, {
						id: '1-2',
						names: '墨西哥taco',
						describe: '地道墨西哥风味儿！~',
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg',
						typeTag: {
							label: '',
							color: 'bg-red'
						},
						tag: [{
							label: '味辣',
							color: 'bg-orange'
						}],
					}, ]
				}, {
					id: '2',
					names: '东方美食',
					foods: [{
						id: '2-1',
						names: '苦瓜炒蛋',
						describe: '反正好吃就对了！~',
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg',
						typeTag: {
							label: '新',
							color: 'bg-red'
						},
						tag: [{
								label: '轻视',
								color: 'bg-green'
							},
							{
								label: '限定',
								color: 'bg-pink'
							}
						],
					}]
				}, {
					id: '3',
					names: '饮料',
					foods: [{
						id: '3-5',
						names: '可口可乐（樱花味）',
						describe: '春季岛国限定！~',
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg',
						typeTag: {
							label: '新',
							color: 'bg-red'
						},
						tag: [{
								label: '无糖',
								color: 'bg-green'
							},
							{
								label: '限定',
								color: 'bg-pink'
							}
						],
					}]
				}, ],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				modalName: null,
				nowFood: {
					names: '美味蟹黄堡',
					img: null,
					isLove: false,
					info: null,
					star: 4.5
				},
				bugerx: 400,
				bugery: 400,
				pdNumber: 0,
				shopCart: []
			};
		},
		mounted() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.hideLoading();
		},
		methods: {
			showModal1() {
				this.modalName = "bottomModal";
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null;
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return true //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						const query = uni.createSelectorQuery().in(this);
						let view = query.select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, (data) => {
							console.log(data)
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						// console.log(scrollTop)
						return false
					}
				}
			},
			Ordering(e, id) {
				this.bugerx = e.detail.x - 80;
				this.bugery = e.detail.y - 30;

				var isExits = this.shopCart.some(item => item.id === id);
				if (isExits) {

					for (let i = 0; i < this.shopCart.length; i++) {
						if (this.shopCart[i].id === id) {
							this.shopCart[i].num++;
							break; // Exit loop once the element with the matching ID is found
						}
					}
				} else {
					this.shopCart.push({
						id: '1-1',
						names: 'x',
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg',
						tag: [{
								label: '爆辣',
								color: 'bg-red'
							},
							{
								label: '非常推荐',
								color: 'bg-yellow'
							},
							{
								label: '招牌',
								color: 'bg-red'
							}
						],
						num: 1,
					})
				}

				setTimeout((() => {
					this.$refs.mySon.handleClick(e);
					let totalNum = 0;
					this.shopCart.forEach(item => {
						totalNum += item.num;
					});
					this.pdNumber = totalNum;
				}), 100)


			},
			ClearCart(e) {
				let that = this;
				this.hideModal(e);
				if (this.shopCart.length == 0) {
					uni.showToast({
						title: '购物车还是空空的哦！',
						icon: 'none',
					});
					return false;
				}
				uni.showModal({
					title: '提示',
					content: '是否确定清空购物菜单？',
					success: function(res) {
						if (res.confirm) {
							that.shopCart = [];
							that.pdNumber = 0;
						} else if (res.cancel) {
							return false;
						}
					}
				});

			},
			Settle(e) {
				let that = this;
				this.hideModal(e);
				if (this.shopCart.length == 0) {
					uni.showToast({
						title: '购物车还是空空的哦！',
						icon: 'none',
					});
					return false;
				}
			},
			CartOperation(tag, id) {

				for (let i = 0; i < this.shopCart.length; i++) {
					if (this.shopCart[i].id === id) {
						var newNum;
						if (tag) {
							newNum = this.shopCart[i].num + 1;
						} else {
							newNum = this.shopCart[i].num - 1;
							if (newNum <= 0) {
								this.shopCart.splice(i, 1);
								break;
							}
						}
						this.shopCart[i].num = newNum;
						break; // Exit loop once the element with the matching ID is found
					}
				}
				let totalNum = 0;
				this.shopCart.forEach(item => {
					totalNum += item.num;
				});
				this.pdNumber = totalNum;
			}
		},
	}
</script>

<style lang="scss">
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
		background-color: #fff;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #ffffff;
		flex: 1;
	}

	.food-info {
		display: inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
		height: auto;
		line-height: 1.5rem;
	}

	$all_width: 96rpx;
	$all_height: 96rpx;

	.movable-area1 {
		height: 90vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件

			image {
				width: $all_width;
				height: $all_height;
			}
		}
	}
</style>